<script>
export default {
  name: "Person",
  // vue2的写法
  // data() {
  //   return {
  //     name: "John Doe",
  //     age: 30,
  //     tel: "123-456-7890"
  //   };
  // },
  // methods: {
  //   showTel() {
  //     alert(this.tel);
  //   }
  // }
  //... setup
  beforeCreate() {
    console.log("beforeCreate");
  },
  setup() {
    console.log("setup");
    let name = "John Doe";
    let age = 30;
    let tel = "123-456-7890";
    const showTel = () => {
      alert(tel);
    };
    const changeName = (newName) => {
      name = newName;
      console.log(name);
    };
    return {
      a: name,
      age,
      showTel,
      changeName
    };
    // return ()=>'<div>hello</div>'
  }
}
</script>

<template>
  <div class="person">

    <h2 @click="changeName('Jane Doe2')">{{ a }}</h2>
    <p>Age: {{ age }}</p>
    <el-button type="primary" @click="showTel">点击我</el-button>
  </div>
</template>

<style scoped>
.main {
  text-align: center;
}
</style>